<script setup>
import { Modal } from 'ant-design-vue'
import { ArrowLeftOutlined, DownOutlined, DownloadOutlined, EyeOutlined, RiseOutlined, SearchOutlined, SyncOutlined, UpOutlined } from '@ant-design/icons-vue'
import moment from 'moment'
import { auditConfirm, exportMobile, getBusinessType, getDict, getMobileDetail, getMobileList, getSum, refundConfirm } from '~@/api/checkBill/index'
import { getMerchantList } from '~@/api/card/index'

defineOptions({
  name: 'Mobile',
})

const defaultDateRange = ref([])
const userStore = useUserStore()
const { hasPermission } = userStore
const message = useMessage()
const columns = shallowRef([
  {
    title: '银行名称',
    dataIndex: 'appName',
    width: 200,
  },
  {
    title: '账单日期',
    dataIndex: 'accountDate',
    align: 'center',
    width: 150,
  },

  {
    title: '差错单状态',
    dataIndex: 'statusName',
    align: 'center',
    width: 150,
  },

  {
    title: '差错类型',
    dataIndex: 'showErrType',
    align: 'center',
    width: 150,
  },
  {
    title: '交易流水号',
    dataIndex: 'channelTradeNo',
    align: 'center',
    width: 250,
  },
  {
    title: '商户订单号',
    align: 'center',
    dataIndex: 'defrayNo',
    width: 250,
  },

  {
    title: '交易金额',
    align: 'center',
    dataIndex: 'mistakeFee',
    width: 150,
  },
  {
    title: '支付方式',
    dataIndex: 'channelName',
    align: 'center',
    width: 150,
  },
  {
    title: '支付类型',
    dataIndex: 'tradeType',
    align: 'center',
    width: 150,
  },
  {
    title: '核销状态',
    dataIndex: 'writeOffName',
    align: 'center',
    width: 150,
  },
  {
    title: '操作时间',
    align: 'center',
    dataIndex: 'actionTime',
    width: 200,
  },

  {
    title: '操作',
    dataIndex: 'action',
    align: 'left',
    fixed: 'right',
    width: 160,

  },
])

const errColumns = shallowRef([
  {
    title: '银行名称',
    dataIndex: 'appName',
    width: 200,
  },
  {
    title: '账单日期',
    dataIndex: 'accountDate',
    align: 'center',
    width: 150,
  },
  {
    title: '交易流水号',
    dataIndex: 'channelTradeNo',
    align: 'center',
    width: 250,
  },
  {
    title: '商户订单号',
    align: 'center',
    dataIndex: 'defrayNo',
    width: 250,
  },
  {
    title: '交易金额',
    align: 'center',
    dataIndex: 'showFee',
    width: 150,
  },
  {
    title: '核销金额',
    align: 'center',
    dataIndex: 'logWriteOff',
    width: 150,
  },
  {
    title: '支付类型',
    dataIndex: 'tradeType',
    align: 'center',
    width: 150,
  },

  {
    title: '差错类型',
    dataIndex: 'showErrType',
    align: 'center',
    width: 150,
  },
])

const bankOptions = shallowRef([])
const bankLoading = shallowRef(false)
const current = shallowRef(0)
const mistakeOptions = shallowRef([])// 差错单状态
const writeOffOptions = shallowRef([])// 核销状态
const businessTypeData = shallowRef([])// 业务类型
const businessChannelData = shallowRef([])// 业务渠道
const channelData = shallowRef([])// 支付方式
const channelArr = shallowRef([])// 支付方式查询数组
const businessChannelArr = shallowRef([])
const businessTypeArr = shallowRef([])// 业务类型查询数组
const errorOptions = shallowRef([
  { configKey: '', configValue: '全部' },
  { configKey: 1, configValue: '长款' },
  { configKey: 2, configValue: '短款' },
])// 差错类型
const accountOptions = shallowRef([
  { configKey: '', configValue: '全部' },
  { configKey: 'BALANCE', configValue: '余额账户' },
  { configKey: 'CREDIT', configValue: '信用账户' },
  { configKey: 'POINTS', configValue: '积分账户' },
  { configKey: 'MOBILE', configValue: '移动支付账户' },
])
const statusOptions = shallowRef([
  { configKey: 'ACTIVE', configValue: '正常' },
  { configKey: 'AUTO_FREEZE', configValue: '自动冻结' },
  { configKey: 'MANUAL_FREEZE', configValue: '人工冻结' },
  { configKey: 'CANCEL', configValue: '注销' },
])
const loading = shallowRef(false)
const totalNum = shallowRef(0)
const pagination = reactive({
  pageSize: 8,
  pageSizeOptions: ['10', '20', '30', '40'],
  current: 1,
  total: totalNum,
  showSizeChanger: true,
  // showQuickJumper: true,
  showTotal: total => `总共：${total}`,
  onChange(current, pageSize) {
    pagination.pageSize = pageSize
    pagination.current = current
    init()
  },
})
const dataSource = shallowRef([])
const errData = shallowRef([])
const dateFormat = 'YYYY-MM-DD'

const formModel = reactive({
  mobileDate: [],
  appId: void 0,
  channelTradeNo: void 0,
  channelFee: void 0,
  writeOffList: void 0,
  handleStatus: void 0,
  errType: void 0,
  businessTypeMap: void 0,
})
const detailInfo = ref({
})
const opertaionObj = ref({
})
const totalInfo = shallowRef([])

const tableSize = ref(['large'])
const operationTitle = ref(['订单详情'])
const activeName = ref(0)

const open = ref(false)
const operationOpen = ref(false)

// 退费中
const isRefunding = ref(false)
// 审核中
const isReviewing = ref(false)
const options = computed(() => {
  return columns.value.map((item) => {
    if (item.dataIndex === 'action') {
      return {
        label: item.title,
        value: item.dataIndex,
        disabled: true,
      }
    }
    return {
      label: item.title,
      value: item.dataIndex,
    }
  })
})
const dropdownVisible = ref(false)
const getCheckList = computed(() => columns.value.map(item => item.dataIndex))
const state = reactive({
  indeterminate: false,
  checkAll: true,
  checkList: getCheckList.value,
})
onMounted(() => {
  const yesterday = moment().subtract(1, 'days').format('YYYY-MM-DD')
  const today = moment().format('YYYY-MM-DD')
  // 设置默认范围
  formModel.mobileDate = [yesterday, today]
  init()
  getTotalInfo()
  getMistakeStatus()
  getWriteOffStatus()
  getPayList()
})
// 处理状态
function handleStatus(text) {
  switch (text) {
    case 'ACTIVE':
      return '正常'
    case 'AUTO_FREEZE':
      return '自动冻结'
    case 'MANUAL_FREEZE':
      return '人工冻结'
    default:
      return '注销'
  }
}

// 查询统计数据
async function getTotalInfo() {
  try {
    const dateStart = `${formModel.mobileDate?.[0]} 00:00:00`
    const dateEnd = `${formModel.mobileDate?.[1]} 23:59:59`
    // 业务渠道、业务类型、支付方式
    businessTypeArr.value = []
    businessChannelArr.value = []
    channelArr.value = []
    if (formModel.businessType) {
      businessTypeArr.value.push(formModel.businessType)
    }
    if (formModel.businessChannel) {
      businessChannelArr.value.push(formModel.businessChannel)
    }
    if (formModel.channel) {
      channelArr.value.push(formModel.channel)
    }
    const businessTypeMap = {
      0: businessTypeArr,
      1: businessChannelArr,
      2: channelArr,
    }
    formModel.businessTypeMap = businessTypeMap

    const { data } = await getSum({ ...formModel, dateStart, dateEnd })
    totalInfo.value = data
  }
  catch (e) {
    console.log(e)
  }
  finally {
    loading.value = false
  }
}
// 查询差错单状态
async function getMistakeStatus() {
  try {
    const { data } = await getDict('mistakeHandleStatus')
    mistakeOptions.value = data
  }
  catch (e) {
    console.log(e)
  }
  finally {
    loading.value = false
  }
}
// 查询核销状态
async function getWriteOffStatus() {
  try {
    const { data } = await getDict('writeOffType')
    writeOffOptions.value = data
  }
  catch (e) {
    console.log(e)
  }
  finally {
    loading.value = false
  }
}
// 查询业务类型、业务渠道、支付方式
async function getPayList() {
  try {
    const { data } = await getBusinessType()
    if (data) {
      businessTypeData.value = data[0]
      businessChannelData.value = data[1]
      channelData.value = data[2]
    }
    else {
      // getPayWay();
    }
  }
  catch (e) {
    console.log(e)
  }
  finally {
    loading.value = false
  }
}

// 查询移动异常订单列表
async function init() {
  if (loading.value)
    return
  loading.value = true
  try {
    // 查询日期
    const startTime = `${formModel.mobileDate?.[0]} 00:00:00`
    const endTime = `${formModel.mobileDate?.[1]} 23:59:59`
    // 业务渠道、业务类型、支付方式
    businessTypeArr.value = []
    businessChannelArr.value = []
    channelArr.value = []
    if (formModel.businessType) {
      businessTypeArr.value.push(formModel.businessType)
    }
    if (formModel.businessChannel) {
      businessChannelArr.value.push(formModel.businessChannel)
    }
    if (formModel.channel) {
      channelArr.value.push(formModel.channel)
    }
    const businessTypeMap = {
      0: businessTypeArr,
      1: businessChannelArr,
      2: channelArr,
    }
    formModel.businessTypeMap = businessTypeMap
    const { data } = await getMobileList({
      param: { ...formModel, startTime, endTime },
      page: {
        currentPage: pagination.current,
        pageSize: pagination.pageSize,
      },

    })

    dataSource.value = data.data ?? []
    dataSource.value.forEach((item, index) => {
      // 退费
      if (item.tradeType === 'REFUND') {
        if (item.errType === 'PLATFORM_MISS') { // 短款
          item.handleTitle = ''
          // 已核销不需要处理
          // if ((item.handleStatus === 'REFUNDED' && item.writeOff === true) || (item.handleStatus === 'HANDLED' && item.writeOff === true)) {
          //   item.handleTitle = ''
          // }
          // else {

          //   item.handleTitle = '手工核销'
          // }
        }
        else if (item.errType === 'CHANNEL_MISS') { // 长款
          if (item.handleStatus === 'NOHANDLE') {
            item.handleTitle = '待审核'
          }
          else if (item.handleStatus === 'CONFIRM') {
            item.handleTitle = '待退费'
          }
          else {
            item.handleTitle = ''
          }
        }
        else {
          // item.errType = "其他";
        }
      }
      else {
      // 支付
        if (item.errType === 'PLATFORM_MISS') { // 长款
          if (item.handleStatus === 'NOHANDLE') {
            item.handleTitle = '待审核'
          }
          else if (item.handleStatus === 'CONFIRM') {
            item.handleTitle = '待退费'
          }
          else {
            item.handleTitle = ''
          }
        }
        else if (item.errType === 'CHANNEL_MISS') { // 短款  只能做核销操作
          item.handleTitle = ''
          // 已核销 不需要手工核销
          // if ((item.handleStatus === 'REFUNDED' && item.writeOff === true) || (item.handleStatus === 'HANDLED' && item.writeOff === true)) {
          //   item.handleTitle = ''
          // }
          // else {
          //   item.handleTitle = '手工核销'
          // }
        }
        else {
          // item.errType = "其他";
        }
      }
    })

    totalNum.value = data.pageInfo.total
  }
  catch (e) {
    console.log(e)
  }
  finally {
    loading.value = false
  }
}

async function onSearch() {
  pagination.current = 1
  await init()
  await getTotalInfo()
}
// 导出
async function exportExcel() {
  if (loading.value)
    return
  loading.value = true
  try {
    // 查询日期
    const startTime = `${formModel.mobileDate?.[0]} 00:00:00`
    const endTime = `${formModel.mobileDate?.[1]} 23:59:59`
    const { data } = await exportMobile({
      ...formModel,
      startTime,
      endTime,

    })
    window.location.href = data.url
  }
  catch (e) {
    console.log(e)
  }
  finally {
    loading.value = false
  }
}

/**
 * 详情
 *  @param record
 *
 */
async function handleDetail(record) {
  loading.value = true
  try {
    const params = {}
    if (record.showErrType === '长款') {
      params.longId = record.id
    }
    else if (record.showErrType === '短款') {
      params.shortId = record.id
    }

    const { data } = await getMobileDetail(params)
    open.value = true
    detailInfo.value = data.mistakeVo
    errData.value = data.writeOffList[0] && data.writeOffList[0].mistakeRecordVos
    if (detailInfo.value.defrayStartTime) {
      current.value = 0
    }
    if (detailInfo.value.defrayCompleteTime) {
      current.value = 1
    }
    if (detailInfo.value.refundCompleteTime) {
      current.value = 2
    }
    loading.value = false
  }
  catch (e) {
    // router.push('/profile/basic')
    console.log(e)
    loading.value = false
  }
  finally {
    loading.value = false
  }
}
// 待审核、待退费
function handleOperation(record) {
  if (record.handleStatus === 'CONFIRM') {
    operationTitle.value = '退费订单详情'
  }
  opertaionObj.value = JSON.parse(JSON.stringify(record))
  operationOpen.value = true
}
// 确认退费
async function handleRefund() {
  Modal.confirm({
    title: '谨慎操作',
    centered: true,
    content: `请确认退费的金额和账户信息无误！`,
    okText: '确认',
    cancelText: '取消',
    onOk() {
      return new Promise((resolve, reject) => {
        isReviewing.value = true
        const params = {
          id: opertaionObj.value.id,
        }
        const res = refundConfirm(params)
          .then((res) => {
            if (res.data.code === 'SUCCESS') {
              setTimeout(() => {
                resolve()
                operationOpen.value = false
                isReviewing.value = false
                init()
                message.success('退费成功')
              }, 1000)
            }
            else {
              isReviewing.value = false
              message.error('退费失败')
              reject() // 保持对话框打开
            }
          })
          .catch(() => {
            isReviewing.value = false
            // message.error('操作失败')
            resolve() // 保持对话框打开
          })
      })
    },
    onCancel() {
      console.log('取消操作')
    },
  })
}

// 确认审核
async function handleReview() {
  isReviewing.value = true
  try {
    const params = {
      id: opertaionObj.value.id,
    }
    const { data } = await auditConfirm(params)
    await init()
    message.success('审核成功')
    operationOpen.value = false
    isReviewing.value = false
  }
  catch (e) {
    console.log(e)
    isReviewing.value = false
  }
  finally {
    isReviewing.value = false
  }
}

// 防抖优化接口请求
async function fetchOptions(value) {
  if (!value.trim()) {
    bankOptions.value = []
    return
  }
  bankLoading.value = true
  const { data } = await getMerchantList(value)
  bankOptions.value = data
  bankLoading.value = false
};
function handleReturn() {
  open.value = false
}
function handleOk() {
  open.value = false
  Modal.destroyAll()
  onSearch()
}
function handleSizeChange(e) {
  tableSize.value[0] = e.key
}
function filterAction(value) {
  return columns.value.filter((item) => {
    if (value.includes(item.dataIndex))
      return true

    return false
  })
}
const filterColumns = ref(filterAction(getCheckList.value))
function handleCheckAllChange(e) {
  Object.assign(state, {
    checkList: e.target.checked ? getCheckList.value : [],
    indeterminate: true,
  })
  filterColumns.value = e.target.checked ? filterAction(getCheckList.value) : filterColumns.value.filter(item => item.dataIndex === 'action')
}
watch(
  () => state.checkList,
  (val) => {
    state.indeterminate = !!val.length && val.length < getCheckList.value.length
    state.checkAll = val.length === getCheckList.value.length
  },
)
function handleResetChange() {
  state.checkList = getCheckList.value
  filterColumns.value = filterAction(getCheckList.value)
}
function handleCheckChange(value) {
  const filterValue = filterAction(value)
  filterColumns.value = filterValue
}
const expand = ref(false)
</script>

<template>
  <page-container>
    <div v-if="open === false">
      <a-card mb-4>
        <a-form :label-col="{ span: 7 }" :wrapper-col="{ span: 20 }" :model="formModel">
          <a-row type="flex" justify="start">
            <a-col :span="8">
              <a-form-item name="cardDate" label="查询日期">
                <a-range-picker
                  v-model:value="formModel.mobileDate"
                  style="width:100%" format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item name="appId" label="医院名称">
                <a-select
                  v-model:value="formModel.appId"
                  show-search
                  placeholder="请输入关键字搜索"
                  allow-clear
                  :filter-option="false"
                  :not-found-content="bankLoading ? '加载中...' : '暂无数据'"
                  @search="fetchOptions"
                >
                  <a-select-option v-for="item in bankOptions" :key="item.appId" :value="item.appId">
                    {{ item.appName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-space flex justify-center class="ml-2">
                <a-button type="primary" @click="onSearch">
                  <SearchOutlined />查询
                </a-button>
                <a-button v-if="hasPermission('account:mistake:export')" type="primary" class="ml-2" ghost @click="exportExcel()">
                  <DownloadOutlined />导出
                </a-button>
                <a-button type="link" @click="expand = !expand">
                  {{ expand ? '收起' : '高级筛选' }}
                  <UpOutlined v-if="expand" />
                  <DownOutlined v-else />
                </a-button>
              </a-space>
            </a-col>
          </a-row>
          <a-row v-if="expand" :gutter="[15, 0]">
            <a-col :span="8">
              <a-form-item name="channelFee" label="交易金额">
                <a-input v-model:value="formModel.channelFee" placeholder="精确查询" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item name="writeOffList" label="核销状态">
                <a-select v-model:value="formModel.writeOffList" mode="multiple" placeholder="请选择" allow-clear>
                  <a-select-option v-for="item in writeOffOptions" :key="item.configKey" :value="item.configKey">
                    {{ item.configValue }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="8">
              <a-form-item name="handleStatus" label="差错单状态">
                <a-select v-model:value="formModel.handleStatus" placeholder="请选择" allow-clear>
                  <a-select-option v-for="item in mistakeOptions" :key="item.configKey" :value="item.configKey">
                    {{ item.configValue }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item name="errType" label="差错类型">
                <a-select v-model:value="formModel.errType" placeholder="请选择" allow-clear>
                  <a-select-option v-for="item in errorOptions" :key="item.configKey" :value="item.configKey">
                    {{ item.configValue }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item name="channelTradeNo" label="交易流水号">
                <a-input v-model:value="formModel.channelTradeNo" placeholder="模糊查询" allow-clear />
              </a-form-item>
            </a-col>
            <a-col v-if="businessTypeData && businessTypeData.length > 0" :span="8">
              <a-form-item label="业务类型">
                <a-select v-model:value="formModel.businessType" placeholder="请选择" allow-clear>
                  <a-select-option v-for="item in businessTypeData" :key="item.code" :value="item.code">
                    {{ item.codeName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col v-if="businessChannelData && businessChannelData.length > 0" :span="8">
              <a-form-item label="业务渠道">
                <a-select v-model:value="formModel.businessChannel" placeholder="请选择" allow-clear>
                  <a-select-option v-for="item in businessChannelData" :key="item.code" :value="item.code">
                    {{ item.codeName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col v-show="channelData && channelData.length > 0" :span="8">
              <a-form-item label="支付方式">
                <a-select v-model:value="formModel.channel" placeholder="请选择" allow-clear>
                  <a-select-option v-for="item in channelData" :key="item.code" :value="item.code">
                    {{ item.codeName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <div style="border-top:1px solid #f0f0f0;padding:0px 20px 20px 20px;margin:10px 0 20px; ">
          <a-tabs v-model:active-key="activeName">
            <a-tab-pane v-for="(item, index) in totalInfo" :key="index" :tab="item.sourceName">
              <div class="sum">
                <div class="left-total">
                  <div class="subTitle">
                    应收总额（元）
                  </div>
                  <div class="subPrice">
                    {{ item.hisAmount ? item.hisAmount : 0 }}
                  </div>
                  <div class="sourceSum">
                    <div v-for="(item1, index) in item.terminalList" :key="index" class="font-14">
                      <span style="margin-right:10px;">{{ item1.terminalCodeName ? item1.terminalCodeName : 0 }} (元)</span><span class="color-1 font-18">{{ item1.hisAmount ? item1.hisAmount : 0 }}</span>
                    </div>
                  </div>
                </div>
                <div class="left-total">
                  <div class="subTitle">
                    实收总额 (元)
                  </div>
                  <div class="subPrice">
                    {{ item.channelAmount ? item.channelAmount : 0 }}
                  </div>
                  <div class="sourceSum">
                    <div v-for="(item2, index) in item.terminalList" :key="index" class="font-14">
                      <span style="margin-right:10px;">{{ item2.terminalCodeName ? item2.terminalCodeName : 0 }} (元)</span><span class="color-1 font-18">{{ item2.channelAmount ? item2.channelAmount : 0 }}</span>
                    </div>
                  </div>
                </div>

                <div class="right-total">
                  <div class="error-amount-part">
                    <div class="subTitle">
                      差异总额 (元)<span class="error-tag">异常</span>
                    </div>
                    <div class="subPrice error-text">
                      {{ item.mistakeAmount ? item.mistakeAmount : 0 }}
                    </div>
                    <div class="dashed" />
                    <div class="sourceSum">
                      <a-row class="font-600">
                        <a-col :span="8">
                          <span>当日核销</span>
                        </a-col>
                        <a-col :span="10">
                          <span class="today-amount">{{ item.writeOffSameAmount ? item.writeOffSameAmount : 0 }} 元</span>
                        </a-col>
                        <a-col :span="6">
                          <span class="today-count">{{ item.writeOffSameCount ? item.writeOffSameCount : 0 }} 笔</span>
                        </a-col>
                      </a-row>
                      <a-row v-for="(item3, index) in item.terminalList" :key="index">
                        <a-col :span="8">
                          <span>{{ item3.terminalCodeName ? item3.terminalCodeName : 0 }}</span>
                        </a-col>
                        <a-col :span="10">
                          <span class="today-amount">{{ item3.writeOffSameAmount ? item3.writeOffSameAmount : 0 }} 元</span>
                        </a-col>
                        <a-col :span="6">
                          <span class="today-count">{{ item3.writeOffSameCount ? item3.writeOffSameCount : 0 }} 笔</span>
                        </a-col>
                      </a-row>
                    </div>
                  </div>
                  <div class="error-amount-part">
                    <div class="subTitle">
                      差异笔数 (笔)<span class="error-tag">异常</span>
                    </div>
                    <div class="subPrice error-text">
                      {{ item.mistakeCount ? item.mistakeCount : 0 }}
                    </div>
                    <div class="dashed" />
                    <div class="sourceSum">
                      <a-row class="font-600">
                        <a-col :span="8">
                          <span>跨天核销</span>
                        </a-col>
                        <a-col :span="10">
                          <span class="today-amount">{{ item.unWriteOffSameAmount ? item.unWriteOffSameAmount : 0 }} 元</span>
                        </a-col>
                        <a-col :span="6">
                          <span class="today-count">{{ item.unWriteOffSameCount ? item.unWriteOffSameCount : 0 }} 笔</span>
                        </a-col>
                      </a-row>
                      <a-row v-for="(item4, index) in item.terminalList" :key="index">
                        <a-col :span="8">
                          <span>{{ item4.terminalCodeName ? item4.terminalCodeName : 0 }}</span>
                        </a-col>
                        <a-col :span="10">
                          <span class="today-amount">{{ item4.unWriteOffSameAmount ? item4.unWriteOffSameAmount : 0 }} 元</span>
                        </a-col>
                        <a-col :span="6">
                          <span class="today-count">{{ item4.unWriteOffSameCount ? item4.unWriteOffSameCount : 0 }} 笔</span>
                        </a-col>
                      </a-row>
                    </div>
                  </div>
                </div>
              </div>
            </a-tab-pane>
          </a-tabs>
        </div>
        <a-table bordered :loading="loading" :columns="filterColumns" :scroll="{ x: 1500 }" :data-source="dataSource" :pagination="pagination">
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'mistakeFee'">
              <span>{{ Number(record.mistakeFee).toFixed(2) }}</span>
            </template>

            <template v-else-if="column.dataIndex === 'tradeType'">
              {{ record.tradeType === 'DEFRAY' ? "支付" : "退费" }}
            </template>
            <template v-else-if="column.dataIndex === 'statusName'">
              <span>
                <a-badge :color="record.statusName === '已审核' ? 'geekblue' : (record.statusName === '未处理' ? 'orange' : '')" />
                <span> {{ record.statusName }}</span>
              </span>
            </template>
            <template v-else-if="column.dataIndex === 'action'">
              <div class="action flex items-center">
                <a-button v-if="record.handleTitle === '待退费' && hasPermission('account:mistake:refund')" style="padding:4px 0;" type="link" @click="handleOperation(record)">
                  {{ record.handleTitle }}
                </a-button>
                <a-button v-if="record.handleTitle === '待审核' && hasPermission('account:mistake:audit')" style="padding:4px 0;" type="link" @click="handleOperation(record)">
                  {{ record.handleTitle }}
                </a-button>
                <span v-if="record.handleTitle" class="middle-line" style="margin:0 15px;">|</span>
                <a-button type="link" style="padding:4px 0;" @click="handleDetail(record)">
                  详情
                </a-button>
              </div>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>
    <div v-else>
      <a-card class="transition-all-300" :bordered="false">
        <div class="flex flex-wrap justify-between">
          <span class="card-title">订单详情</span>
          <a-button class="mb-4" @click="handleReturn">
            <template #icon>
              <ArrowLeftOutlined />
            </template>
            返回
          </a-button>
        </div>
        <a-steps
          class="mt-10 mb-10"
          :current="current"
          :items="[
            {
              title: '订单发起时间',
              disabled,
              description: detailInfo.defrayStartTime ? detailInfo.defrayStartTime : '--',
            },
            {
              title: '订单支付时间',
              description: detailInfo.defrayCompleteTime ? detailInfo.defrayCompleteTime : '--',
              disabled,
            },
            {
              title: '订单退费时间',
              description: detailInfo.refundCompleteTime ? detailInfo.refundCompleteTime : '--',
              disabled,
            },
          ]"
        >
          <template #progressDot="{ index, status, prefixCls }">
            <a-popover>
              <span :class="`${prefixCls}-icon-dot`" />
              <template #content>
                <span>step {{ index }} status: {{ status }}</span>
              </template>
            </a-popover>
          </template>
        </a-steps>

        <a-divider style="margin: 0px 0 20px 0" />
        <!-- HIS订单信息 -->
        <div>
          <a-descriptions title="HIS订单信息" class="pl-4">
            <a-descriptions-item label="患者姓名">
              {{ detailInfo.platformAccountVo && detailInfo.platformAccountVo.name ? detailInfo.platformAccountVo.name : "--" }}
            </a-descriptions-item>
            <a-descriptions-item label="业务渠道">
              {{ detailInfo.platformAccountVo && detailInfo.platformAccountVo.businessName ? detailInfo.platformAccountVo.businessName : "--" }}
            </a-descriptions-item>
            <a-descriptions-item label="支付账号">
              {{ detailInfo.platformAccountVo && detailInfo.platformAccountVo.buyerAccount ? detailInfo.platformAccountVo.buyerAccount : "--" }}
            </a-descriptions-item>

            <a-descriptions-item label="订单日期">
              {{ detailInfo.platformAccountVo && detailInfo.platformAccountVo.accountDate ? detailInfo.platformAccountVo.accountDate : "--" }}
            </a-descriptions-item>

            <a-descriptions-item label="交易流水号">
              {{ detailInfo.platformAccountVo && detailInfo.platformAccountVo.channelTradeNo ? detailInfo.platformAccountVo.channelTradeNo : "--" }}
            </a-descriptions-item>
            <a-descriptions-item label="HIS交易流水号">
              {{ detailInfo.platformAccountVo && detailInfo.platformAccountVo.appTradeNo ? detailInfo.platformAccountVo.appTradeNo : "--" }}
            </a-descriptions-item>
            <a-descriptions-item label="商户订单号">
              {{ detailInfo.platformAccountVo && detailInfo.platformAccountVo.defrayNo ? detailInfo.platformAccountVo.defrayNo : "--" }}
            </a-descriptions-item>
            <a-descriptions-item label="交易金额">
              {{ detailInfo.platformAccountVo && detailInfo.platformAccountVo.defrayFee ? detailInfo.platformAccountVo.defrayFee : "--" }}
            </a-descriptions-item>
            <a-descriptions-item label="交易发起时间">
              {{ detailInfo.platformAccountVo && detailInfo.platformAccountVo.defrayCompleteTime ? detailInfo.platformAccountVo.defrayCompleteTime : "--" }}
            </a-descriptions-item>
            <a-descriptions-item label="操作员">
              {{ detailInfo.platformAccountVo && detailInfo.platformAccountVo.operator ? detailInfo.platformAccountVo.operator : "--" }}
            </a-descriptions-item>
            <a-descriptions-item label="业务备注">
              {{ detailInfo.platformAccountVo && detailInfo.platformAccountVo.body ? detailInfo.platformAccountVo.body : "--" }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
        <!-- 第三方订单信息 -->
        <a-divider style="margin: 0px 0 20px 0" />
        <div>
          <a-descriptions title="第三方订单信息" class="pl-4">
            <a-descriptions-item label="患者ID">
              {{ detailInfo.channelAccountVo && detailInfo.channelAccountVo.userId ? detailInfo.channelAccountVo.userId : "--" }}
            </a-descriptions-item>
            <a-descriptions-item label="支付方式">
              {{ detailInfo && detailInfo.channelName ? detailInfo.channelName : "--" }}
            </a-descriptions-item>
            <a-descriptions-item label="支付账号">
              {{ detailInfo.channelAccountVo && detailInfo.channelAccountVo.buyerAccount ? detailInfo.channelAccountVo.buyerAccount : "--" }}
            </a-descriptions-item>
            <a-descriptions-item label="支付类型">
              {{ detailInfo.channelAccountVo && detailInfo.channelAccountVo.tradeType ? detailInfo.channelAccountVo.tradeType : "--" }}
            </a-descriptions-item>
            <a-descriptions-item label="交易流水号">
              {{ detailInfo.channelAccountVo && detailInfo.channelAccountVo.channelTradeNo ? detailInfo.channelAccountVo.channelTradeNo : "--" }}
            </a-descriptions-item>
            <a-descriptions-item label="商户订单号">
              {{ detailInfo.channelAccountVo && detailInfo.channelAccountVo.defrayNo ? detailInfo.channelAccountVo.defrayNo : "--" }}
            </a-descriptions-item>
            <a-descriptions-item label="业务渠道">
              {{ detailInfo.channelAccountVo && detailInfo.channelAccountVo.businessName ? detailInfo.channelAccountVo.businessName : "--" }}
            </a-descriptions-item>
            <a-descriptions-item label="交易金额">
              {{ detailInfo.channelAccountVo && detailInfo.channelAccountVo.defrayFee ? detailInfo.channelAccountVo.defrayFee : "--" }}
            </a-descriptions-item>
            <a-descriptions-item label="交易发起时间">
              {{ detailInfo.channelAccountVo && detailInfo.channelAccountVo.payTime ? detailInfo.channelAccountVo.payTime : "--" }}
            </a-descriptions-item>
            <a-descriptions-item label="交易完成时间">
              {{ detailInfo.channelAccountVo && detailInfo.channelAccountVo.refundTime ? detailInfo.channelAccountVo.refundTime : "--" }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
        <!-- 差错单信息 -->
        <a-divider style="margin: 0px 0 20px 0" />
        <div class="pl-4">
          <div class="error-title mb-6">
            差错单信息
          </div>
          <a-table bordered :loading="loading" :columns="errColumns" :scroll="{ x: 1200 }" :data-source="errData" :pagination="false">
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'mistakeFee'">
                <span>{{ Number(record.mistakeFee).toFixed(2) }}</span>
              </template>
              <template v-else-if="column.dataIndex === 'channelTradeNo'">
                {{ record.channelTradeNo ? record.channelTradeNo : '--' }}
              </template>
              <template v-else-if="column.dataIndex === 'defrayNo'">
                {{ record.defrayNo ? record.defrayNo : '--' }}
              </template>
              <template v-else-if="column.dataIndex === 'tradeType'">
                {{ record.tradeType === 'DEFRAY' ? "支付" : "退费" }}
              </template>
              <template v-else-if="column.dataIndex === 'statusName'">
                <span>
                  <a-badge :color="record.statusName === '已审核' ? 'geekblue' : (record.statusName === '未处理' ? 'orange' : '')" />
                  <span> {{ record.statusName }}</span>
                </span>
              </template>
            </template>
          </a-table>
        </div>
        <!-- 订单异常原因 -->
        <a-divider style="margin: 30px 0 20px 0" />
        <a-descriptions title="订单异常原因" class="pl-4">
          <a-descriptions-item label="原因说明">
            {{ detailInfo.errInfo }}
          </a-descriptions-item>
        </a-descriptions>
      </a-card>
      <div v-if="loading" class="fullscreen-loading">
        <a-spin size="large" />
      </div>
    </div>
    <a-modal v-model:open="operationOpen" :title="operationTitle" width="900px" :mask-closable="false" :footer="null" @ok="handleOk">
      <a-card class="transition-all-300" :bordered="false">
        <a-descriptions :column="2">
          <a-descriptions-item label="应用ID">
            {{ opertaionObj.appId ? opertaionObj.appId : '--' }}
          </a-descriptions-item>
          <a-descriptions-item label="财务类型">
            {{ opertaionObj.title ? opertaionObj.title : '--' }}
          </a-descriptions-item>
          <a-descriptions-item label="患者姓名">
            {{ opertaionObj.name ? opertaionObj.name : '--' }}
          </a-descriptions-item>
          <a-descriptions-item label="支付账号">
            {{ opertaionObj.buyerAccount ? opertaionObj.buyerAccount : '--' }}
          </a-descriptions-item>
          <a-descriptions-item label="订单日期">
            {{ opertaionObj.accountDate ? opertaionObj.accountDate : '--' }}
          </a-descriptions-item>
          <a-descriptions-item label="HIS交易流水号">
            {{ opertaionObj.appTradeNo ? opertaionObj.appTradeNo : '--' }}
          </a-descriptions-item>
          <a-descriptions-item v-if="opertaionObj.handleStatus === 'CONFIRM'" label="商户订单号">
            {{ opertaionObj.defrayNo ? opertaionObj.defrayNo : '--' }}
          </a-descriptions-item>
          <a-descriptions-item label="交易流水号">
            {{ opertaionObj.channelTradeNo ? opertaionObj.channelTradeNo : '--' }}
          </a-descriptions-item>
          <a-descriptions-item label="交易发起时间">
            {{ opertaionObj.defrayCompleteTime ? opertaionObj.defrayCompleteTime : '--' }}
          </a-descriptions-item>
          <a-descriptions-item label="HIS交易金额">
            {{ opertaionObj.defrayFee ? opertaionObj.defrayFee : '--' }}
          </a-descriptions-item>
          <a-descriptions-item label="第三方交易金额">
            {{ opertaionObj.channelFee ? opertaionObj.channelFee : '--' }}
          </a-descriptions-item>
          <a-descriptions-item v-if="opertaionObj.handleStatus === 'CONFIRM'" label="退费金额">
            {{ opertaionObj.refundFee ? opertaionObj.refundFee : '--' }}
          </a-descriptions-item>
          <a-descriptions-item v-if="opertaionObj.handleStatus === 'NOHANDLE'" label="核销金额">
            {{ opertaionObj.writeOffFee ? opertaionObj.writeOffFee : 0 }}
          </a-descriptions-item>
          <a-descriptions-item label="业务备注">
            {{ opertaionObj.body ? opertaionObj.body : '--' }}
          </a-descriptions-item>
        </a-descriptions>
        <div v-if="opertaionObj.errTypeCode === '1'" class="operation text-center mt-8 mb-2">
          <a-button v-if="opertaionObj.handleStatus === 'CONFIRM'" :loading="isReviewing" type="primary" style="width: 200px;" @click="handleRefund">
            退费
          </a-button>
          <a-button v-if="opertaionObj.handleStatus === 'NOHANDLE'" type="primary" :loading="isReviewing" style="width: 200px;" @click="handleReview">
            审核
          </a-button>
        </div>
      </a-card>
    </a-modal>
  </page-container>
</template>

<style lang="less" scoped>
  :deep(.ant-tabs .ant-tabs-tab){
    width:130px !important;
    justify-content: center !important;
  }
  /* 强制左对齐 */
.ant-form-item-label {
  text-align: left !important;
}
  .dashed{
    width: 100%;
    margin-top:12px;
    margin-bottom:20px;
    height: 1px;
    background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
    background-size: 8px 1px;
    background-repeat: repeat-x;
  }

  .error-text {
    color: #ff5140 !important;
  }
  .error-tag {
    background-color: #ffdcd9;
    color: #FF5140;
    font-size: 12px;
    vertical-align: middle;
    margin-left: 7px;
    border-radius: 2px;
    padding: 2px 6px 3px;
}

  .sum{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  .total-title{
    font-size: 24px;
  }
  .left-total{
    width:23%;
    border: 1px solid #e6e6e6;
    padding:20px 20px;
    .sourceSum{
    margin: 27px 0 26px;
    /* background: #f4f8ff; */
    color:#666;
    padding:4px 0 0;
    font-size: 14px;
    div{
      margin-bottom:10px;
    }

  }
    .subTitle{
      display: flex;
      color: #666;
      font-size: 15px;
    }
    .subPrice{
      margin-top: 10px;
      color: #111;
      font-size: 32px;
    }
  }
  .right-total{
    border: 1px solid #e6e6e6;
    width:52%;
    display: flex;
    /* justify-content: space-between; */
    .sourceSum{

      justify-content: space-between;
      margin-top: 15px;
       /* background: #f6f6f6; */
      color:#666;
       /* padding:12px; */
      font-size: 14px;
      div{
        display:flex;
        /* justify-content: space-between; */
        margin-bottom:7px;
      }
    div:last-child{
      margin-bottom:0px;
    }

    }
    .error-amount-part{
    width:50%;
    padding:20px 0 15px 20px;
    .subTitle{
      display: flex;
      color: #666;
      font-size: 15px;
    }
    .subPrice{
      margin-top: 10px;
      color: #111;
      font-size: 32px;
    }
    }
    .error-count-part{
    padding:20px 0 20px 20px;
    .subTitle{
      color: #666;
      font-size: 15px;
      display: flex;
    }
    .subPrice{
      margin-top: 10px;
      color: #111;
      font-size: 32px;
    }
    }
  }
  .today{
    display:flex;
    span:nth-child(2){
       /* margin-left:15px;
       width: 400px; */
    }
    span:last-child{
       /* margin-left:15px; */
    }
  }
}

  .operation{
    width:100%
  }
    .error-title{
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      flex: auto;
      color: rgba(0, 0, 0, 0.88);
      font-weight: 600;
      font-size: 16px;
      line-height: 1.5;
    }
    .red{
      color:red;
      /* color:#ff4d4f; */
    }
    .card-title{
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      flex: auto;
      color: rgba(0, 0, 0, 0.88);
      font-weight: 600;
      font-size: 16px;
      line-height: 1.5;
    }
  @media screen and (max-width: 1200px) and (min-width: 992px) {
    .activeCard {
      margin-bottom: 24px;
    }
    .members {
      margin-bottom: 0;
    }
    .extraContent {
      margin-left: -44px;
      .statItem {
        padding: 0 16px;
      }
    }
  }

  @media screen and (max-width: 992px) {
    .activeCard {
      margin-bottom: 24px;
    }
    .members {
      margin-bottom: 0;
    }
    .extraContent {
      float: none;
      margin-right: 0;
      .statItem {
        padding: 0 16px;
        text-align: left;
        &::after {
          display: none;
        }
      }
    }
  }

  @media screen and (max-width: 768px) {
    .extraContent {
      margin-left: -16px;
    }
    .projectList {
      .projectGrid {
        width: 50%;
      }
    }
  }

  @media screen and (max-width: 576px) {
    .pageHeaderContent {
      display: block;
      .content {
        margin-left: 0;
      }
    }
    .extraContent {
      .statItem {
        float: none;
      }
    }
  }

  @media screen and (max-width: 480px) {
    .projectList {
      .projectGrid {
        width: 100%;
      }
    }
  }
  </style>
